import { useState,useCallback } from 'react'
import { View, Swiper,SwiperItem,Text,Switch,Slider,Radio,RadioGroup,Label } from '@tarojs/components'
import './index.scss'

const easingFunctionList = [
  {
    value: 'default',
    text: '默认缓动函数',
    checked: false
  },
  {
    value: 'linear',
    text: '线性动画',
    checked: true
  },
  {
    value: 'easeInCubic',
    text: '缓入动画',
    checked: false
  },
  {
    value: 'easeOutCubic',
    text: '缓出动画',
    checked: false
  },
  {
    value: 'easeInOutCubic',
    text: '缓入缓出动画',
    checked: false
  },
]

const Home = () => {
  const [swiperData,setSwiperData] = useState({
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    circular: true,
    interval: 4000,
    duration: 4000,
    easingFunction: 'linear',
  })
  const changeProperty = (e) => {
    const propertyName = e.currentTarget.dataset.name
    const changeSwiperData = {...swiperData}
    changeSwiperData[propertyName] = e.detail.value
    setSwiperData(changeSwiperData)
  }
  return (
    <View className="container">
      <View className="page-body">
        <View className="page-section page-section-spacing swiper">
          <Swiper
            indicatorDots={swiperData.indicatorDots}
            autoplay={swiperData.autoplay}
            circular={swiperData.circular}
            vertical={swiperData.vertical}
            interval={swiperData.interval}
            easingFunction={swiperData.easingFunction}
            duration={swiperData.duration}>
            {
              swiperData.background.map(item => {
                return <SwiperItem key={item} className={'swiper-item ' + item}></SwiperItem>
              })
            }
          </Swiper>
        </View>
        <View className="page-section page-section-spacing page-section-easing">
          <Text>动画类型</Text>
          <View className='radio-list'>
            <RadioGroup onChange={changeProperty} data-name="easingFunction">
              {easingFunctionList.map((item, i) => {
                return (
                  <Label className='radio-list__label' for={i} key={i}>
                    <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
                  </Label>
                )
              })}
            </RadioGroup>
          </View>
        </View>
        <View className="page-section" style="margin-top: 40rpx;">
          <View className="weui-cells weui-cells_after-title">
            <View className="weui-cell weui-cell_switch">
              <View className="weui-cell__bd">指示点</View>
              <View className="weui-cell__ft">
                <Switch checked={swiperData.indicatorDots} onChange={changeProperty} data-name="indicatorDots"/>
              </View>
            </View>
            <View className="weui-cell weui-cell_switch">
              <View className="weui-cell__bd">自动播放</View>
              <View className="weui-cell__ft">
                <Switch checked={swiperData.autoplay} onChange={changeProperty} data-name="autoplay"/>
              </View>
            </View>
            <View className="weui-cell weui-cell_switch">
              <View className="weui-cell__bd">衔接滑动</View>
              <View className="weui-cell__ft">
                <Switch checked={swiperData.circular} onChange={changeProperty} data-name="circular"/>
              </View>
            </View>
            <View className="weui-cell weui-cell_switch">
              <View className="weui-cell__bd">竖向</View>
              <View className="weui-cell__ft">
                <Switch checked={swiperData.vertical} onChange={changeProperty} data-name="vertical"/>
              </View>
            </View>
          </View>
        </View>
        <View className="page-section page-section-spacing">
          <View className="page-section-title">
            <text>幻灯片切换时长(ms)</text>
            <text className="info">{swiperData.duration}</text>
          </View>
          <Slider value={swiperData.duration} min="2000" max="10000" onChange={changeProperty} data-name="duration"/>
          <View className="page-section-title">
            <text>自动播放间隔时长(ms)</text>
            <text className="info">{swiperData.interval}</text>
          </View>
          <Slider value={swiperData.interval} min="2000" max="10000" onChange={changeProperty} data-name="interval" />
        </View>

      </View>
    </View>

  )
}

export default Home
